<template>
	<view>

		<view id="chart-type-five-line" style="width:100%;height:420px" />
		<view style="overflow-x: auto;">
			<view style="display: flex;">

				<view class="indicators" :class="mainIndex==index?'actived':''" v-for="(type,index) in mainIndicators"
					@click="setMainIndicator(type,index)">
					{{type}}
				</view>|
				<view class="indicators" :class="item.check?'actived':''" v-for="(item,idx) in subIndicoators"
					@click="setSubIndicator(item,idx)">
					{{item.name}}
				</view>
			</view>

		</view>
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	import {
		init,
		dispose,
		registerIndicator,
		getFigureClass,
		registerStyles,
		registerXAxis
	} from 'klinecharts'
	import * as echarts from 'echarts';

	export default {
		name: 'HQChart',
		props: {

			pageLineType: String
		},
		data() {
			return {
				mainIndex: 0,
				dataSource: null,
				mainIndicators: ["ENV", "SAR"],
				subIndicoators: [{
					name: 'VOL',
					check: true
				}, {
					name: 'MACD',
					check: true
				}, {
					name: 'KDJ',
					check: true
				}, {
					name: 'RSI',
					check: false
				}, {
					name: 'WR',
					check: false
				}, {
					name: 'VR',
					check: false
				}, {
					name: 'CCI',
					check: false
				}, {
					name: 'BIAS',
					check: false
				}, {
					name: 'DMA',
					check: false
				}, {
					name: 'MTM',
					check: false
				}]

			}
		},

		onLoad() {

		},
		onHide() {
			// dispose('chart')
		},
		onShow() {
			this.$nextTick(() => {
				this.initEvDay()
			})

		},
		onReady() {

		},

		methods: {
			minChartFn() {

				this.kLineChart = init("chart-type-five-line");
				if(this.dataSource.chart_data.length>0){
					this.kLineChart.applyNewData(this.dataSource.chart_data);
				}
				
				this.kLineChart.setMaxOffsetLeftDistance(10);
				this.kLineChart.setMaxOffsetRightDistance(20);
				// this.kLineChart.setCustomApi({
				// 	formatDate: (timestamp, _, type) => {
				// 		console.log(timestamp);
				// 		const date = new Date(timestamp)
				// 		const year = date.getFullYear()
				// 		const month = `${date.getMonth() + 1}`.padStart(2, '0')
				// 		const day = `${date.getDate()}`.padStart(2, '0')
				// 		const hour = `${date.getHours()}`.padStart(2, '0')
				// 		const minute = `${date.getMinutes()}`.padStart(2, '0')
				// 		console.log(` ${hour}:${minute}`);


				// 		return ` ${hour}:${minute}`
				// 	}
				// })
				// console.log(this.dataSource.chart_data,'this.dataSource.chart_data');

				this.kLineChart.createIndicator('MA', false, {
					id: 'candle_pane'
				});

				const paneId2 = this.kLineChart.createIndicator('KDJ');
				const paneId1 = this.kLineChart.createIndicator('VOL');
				this.kLineChart.setStyles({
					candle: {

						tooltip: {
							offsetBottom: {

							},
							custom: [],
							text: {
								size: 8
							}
						},
						priceMark: {

						}
					},

					indicator: {
						lastValueMark: {

							show: false
						},
						tooltip: {

							offsetTop: 5,
							offsetLeft: 3,
							offsetRight: 1,
							text: {
								size: 10,
								color: "#000"
							}
						}
					}
				});
				this.kLineChart.setPaneOptions({
					id: 'candle_pane',
					axis: {
						gap: {
							top: 100
						}
					}
				})
				this.kLineChart.setPaneOptions({
					id: paneId1,
					axis: {
						gap: {
							top: 100
						}
					}
				})
				this.kLineChart.setPaneOptions({
					id: paneId2,
					axis: {
						gap: {
							top: 100
						}
					}
				})
			},



			initEvDay() {
				var that = this
				uni.request({
					url: 'http://103.214.167.178:9999/manager/transaction/kline/getKlineDataForDay?type=GOLD',
					method: 'get',
					success(res) {

						that.dataSource = res.data.data;
						// console.log(that.dataSource);
						// that.dataSource = JSON.parse(that.dataSource)
						that.minChartFn()
						// console.log(this.dataSource, 'this.dataSource ')
						// this.kLineChart.createIndicator("KDJ");
						// this.kLineChart.createIndicator("VOL");
						// this.kLineChart.createIndicator("RSI");
						// this.kLineChart.applyNewData(this.dataSource.chart_data)
						// this.chart.zoomAtCoordinate(0.8, { x: 150, y: 150 }, 200);
						that.kLineChart.resize();
					}
				})





			},
			setMainIndicator: function(name, index) {
				this.mainIndex = index;

				this.paneId = this.kLineChart.createIndicator(name, false, {
					id: "candle_pane"
				});
			},
			setSubIndicator: function(item) {

				item.check = !item.check

				var dataTrue = []
				this.subIndicoators.map((item) => {
					if (item.check === true) {
						dataTrue.push(item.check)

					}

				})
				if (dataTrue.length > 3) {
					this.$refs.uToast.show({
						// type: "success",
						message: '副图最多只支持三个'
					})
					item.check = false
					return false
				}
				if (item.check) {
					this.kLineChart.createIndicator(item.name);
				} else {
					this.kLineChart.removeIndicator({
						name: item.name
					});
				}

				this.kLineChart.updateData(this.dataSource.chart_data);
			},
		}
	}
</script>

<style>
	@import url(../line.css);
</style>